<template>
  <view class="content" v-show="show" catchtouchmove="stopPageScroll">
    <hch-poster
      ref="hchPoster"
      @cancel="handleCancel"
      :posterData.sync="posterData"
      @previewImage="previewImage"
			@succeed="show=true"
    />
  </view>
</template>

<script>
  import HchPoster from '../../components/hch-poster/hch-poster.vue'
  export default {
    components: { 
      HchPoster
    },
		props:{ 
			data:{
				type: Object,
				default: {}
			},
			code_url:{
				type: String,
				default: ''
			}
		},
		watch:{
			data(){
				let index =this.data.add.indexOf('市')+1
				this.data.add=this.data.add.slice(index,this.data.add.length)
				this.posterData.mainImg.url=this.data.pic_set_c[0]
				this.posterData.name.text=this.data.user.length>11?this.data.user.slice(0,11)+'...':this.data.user
				if(this.data.add.length>11){
				this.posterData.address[0].text=this.data.add.slice(0,11)
				this.posterData.address[1].text=this.data.add.slice(11,this.data.add.length>22?22:this.data.add.length)+(this.data.add.length>22?'...':'')
				}else{
					this.posterData.address[0].text=this.data.add
				}		
				this.posterData.phone.text=this.data.service_tel
				this.posterData.codeImg.url=this.code_url
				console.log('海报数据',this.posterData)
			}
		},
    data() {
      return {
				show:false,
        deliveryFlag: false, //
        // 海报模板数据
     posterData: {
       poster: {
         //根据屏幕大小自动生成海报背景大小
         // url: 'https://huangchunhongzz.gitee.io/imgs/poster/poster_bg_3.png', //图片地址
         r: 10, //圆角半径
         w: 300, //海报宽度
         h: 430, //海报高度
         p: 40 //海报内边距padding
       },
     	title: {
     	  //机构标题
     	  text: '寻找素质教育  就上i乐学', //文本
     		fontFamily:'楷体',
     	  fontSize: 16, //字体大小
     	  color: '#8C8C8C', //颜色
     	  lineHeight: 25, //行高
     		mt:-15
     	},
       mainImg: {
         //海报主商品图
         url: 'https://ilexue.top/public/uploads/20211016/7f5a22d6874636ad36010b42425efdf6.jpg', //图片地址
         r: 10, //圆角半径
         w: 250, //宽度
         h: 250 ,//高度
				 mt:10
       },
       name: {
         //机构标题
         text: '思训家演讲口才培训', //文本
         fontSize: 16, //字体大小
         color: '#000', //颜色
         lineHeight: 25, //行高
         mt: 25 //margin-top
       },
     	// grade:{
     	// 	//机构评分
     	// 	text: '★★★☆☆', //文本
     	// 	fontSize: 24, //字体大小
     	// 	color: '#ffaa00', //颜色
     	// 	lineHeight: 25, //行高
     	// 	mt: 56 //margin-top
     	// },
     	// gradeText:{
     	// 	text: '5分', //文本
     	// 	fontSize: 16, //字体大小
     	// 	color: '#ffaa00', //颜色
     	// 	lineHeight: 25, //行高
     	// 	mt: 55 //margin-top
     	// },
     	address: [{
     		//地址
     		text: '', //文本
     		fontSize: 15, //字体大小
     		color: '#888888', //颜色
     		lineHeight: 25, //行高
     		mt: 70 //margin-top
     	},{
     		//地址
     		text: '', //文本
     		fontSize: 15, //字体大小
     		color: '#888888', //颜色
     		lineHeight: 25, //行高
     		mt: 70 //margin-top
     	}					
     	],
     	phone: {
     	  //电话
     	  text: '4000303096-58015', //文本
     	  fontSize: 16, //字体大小
     	  color: '#888888', //颜色
     	  lineHeight: 25, //行高
     	  mt: 100 //margin-top
     	},
       codeImg: {
         //小程序码
         url: '', //图片地址
         w: 80, //宽度
         h: 80, //高度
         mt: 20, //margin-top
         r: 40 //圆角半径
       },
       tips: [
         //提示信息
         {
           text: '长按识别小程序码', //文本
           fontSize: 12, //字体大小
           color: '#888888', //字体颜色
           align: 'right', //对齐方式
           lineHeight: 25, //行高
           mt: 20 //margin-top
         }
       ]
     }
      }
    },
    onLoad() {},
    methods: {
      /**
       * @description: 生成海报
       * @param {type}
       * @return {type}
       * @author: hch
       */
      handleShowPoster() {
				console.log(1)
        this.$refs.hchPoster.posterShow()
        this.deliveryFlag = false
      },
      /**
       * @description: 分享弹窗
       * @param {type}
       * @return {type}
       * @author: hch
       */
      shareEvn(type) {
        this.deliveryFlag = true
      },
      /**
       * @description: 关闭分享弹窗
       * @param {type}
       * @return {type}
       * @author: hch
       */
      handleClose() {
        this.deliveryFlag = false
      },
      /**
       * @description: 取消海报
       * @param {type}
       * @return {type}
       * @author: hch
       */
      handleCancel(val) {
				this.show=false
        // this.canvasFlag = val
      },
      /**
       * @description: h5的情况下，点击海报保存按钮到图片预览海报，可以长按保存
       * @param {*} base64
       * @return {*}
       * @author: hch
       */
      previewImage(base64) {
        // 预览图片
        uni.previewImage({
          urls: [base64]
        })
      }
    }
  }
</script>

<style lang="scss">
  /* 每个页面公共css 放app.vue页面的 */
  @font-face {
    font-family: 'font_family'; /* project id 1991769 */
    src: url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.eot');
    src: url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.woff') format('woff'),
      url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1991769_u8wpg8jfhpq.svg#iconfont') format('svg');
  }

  .font_family {
    font-family: 'font_family' !important;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    -webkit-text-stroke-width: 0.2px;
  }

  /* 按钮去掉边框 */
  button::after {
    border: none;
  }

  button {
    height: auto; //支付宝需要加
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    font-size: 28rpx;
    line-height: 1;
    color: #1c1c1c;
    background: none;
    border: none; //支付宝需要加
  }

  .button-hover {
    color: #1c1c1c;
    background: none;
  }

  .poster-img {
    width: 40%;
  }

  /* 每个页面公共css */
  .content {
		width: 100vw;
		height: 100vh;
    text-align: center;
  }

  .share-btn {
    padding: 30rpx 60rpx;
    color: $uni-text-color-inverse;
    background-color: $uni-btn-color;
  }

  .share-pro {
    z-index: 5;
    display: flex;
    line-height: 1;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;

    .share-pro-mask {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .share-pro-dialog {
      position: relative;
      position: fixed;
      bottom: 0;
      width: 750rpx;
      height: 310rpx;
      overflow: hidden;
      background-color: #fff;
      border-radius: 24rpx 24rpx 0 0;
      box-sizing: border-box;

      .close-btn {
        position: absolute;
        top: 0rpx;
        right: 29rpx;
        padding: 20rpx 15rpx;
      }

      .share-pro-title {
        padding: 28rpx 41rpx;
        font-size: 28rpx;
        color: #1c1c1c;
        background-color: #f7f7f7;
      }

      .share-pro-body {
        display: flex;
        font-size: 28rpx;
        color: #1c1c1c;
        flex-direction: row;
        justify-content: space-around;

        .share-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          justify-content: space-around;

          .share-icon {
            margin-top: 39rpx;
            margin-bottom: 16rpx;
            font-size: 70rpx;
            color: #42ae3c;
            text-align: center;
          }

          &:nth-child(2) {
            .share-icon {
              color: #ff5f33;
            }
          }
        }
      }
    }

    /* 显示或关闭内容时动画 */

    .open {
      transform: translateY(0);
      transition: all 0.3s ease-out;
    }

    .close {
      transform: translateY(310rpx);
      transition: all 0.3s ease-out;
    }
  }

</style>
